<template>
  <div class="content-box">
    <el-row>
      <el-col :span="16"><div class="lable-title">{{ title }}</div></el-col>
      <el-col :span="8">
        <div class=" btn-list">
          <div v-for="(item,index) in btnLists" :key="index" class="list_item"><el-button :type="active===item.val?'primary':''" @click="btnActive(item.val)">{{ item.text }}</el-button> </div>
          <!-- <div class="list_item"><el-button :type="active=='day'?'primary':''" @click="btnActive('day')">当日</el-button></div>
          <div class="list_item"><el-button :type="active=='week'?'primary':''" @click="btnActive('week')">本周</el-button></div>
          <div class="list_item"><el-button :type="active=='month'?'primary':''" @click="btnActive('month')">本月</el-button></div>
          <div class="list_item"><el-button :type="active=='quarter'?'primary':''" @click="btnActive('quarter')">季度</el-button></div>
          <div class="list_item"><el-button :type="active=='years'?'primary':''" @click="btnActive('years')">本年</el-button></div> -->
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    btnList: {
      type: Array,
      default: function() {
        return [
          { 'text': '全部', 'val': 'all' },
          { 'text': '当日', 'val': 'day' },
          { 'text': '本周', 'val': 'week' },
          { 'text': '本月', 'val': 'month' },
          { 'text': '季度', 'val': 'quarter' },
          { 'text': '本年', 'val': 'years' }
        ]
      }
    },
    currentBtnActive: {
      type: String,
      default: 'all'
    }
  },
  data() {
    return {
      active: this.currentBtnActive
    }
  },
  computed: {
    btnLists: function() {
      return this.btnList
    }
  },
  methods: {
    btnActive(type) {
      console.log(type)
      this.active = type
      this.$emit('change', type)
    }
  }
}
</script>

<style scoped>
.content-box{height: 40px;line-height: 40px;}
 .lable-title{font-weight: bold;}
 el-button{font-size: 12px;height: 30px;margin: 5px 0;padding: 0 10px;}
 .el-button--small{padding: 5px 18px;width:90%;}
 .btn-list{display: flex;justify-content:space-between;}
.list_item{flex: 1;}
</style>
